import React, { PureComponent } from 'react';
import { ChartEdit } from '../g6edit';
import styles from './index.less';

class FlowChartDetail extends PureComponent {

  componentDidMount() {
    setTimeout(() => {
      const { data: { nodes = [], edges = [], groups=[] }, fitView } = this.props;
      try {
        if (this.flowEditRef) {
          this.flowEditRef.drawModel({ nodes, edges, groups });
          this.flowEditRef.editorForceFit(fitView || 'tc');
        }
      } catch (e) {
        this.err = e;
      }
    }, 500);
  }

  componentDidUpdate(preProps) {
    const { dataLoading } = this.props;
    const { dataLoading: preDataLoading } = preProps;
    if (preDataLoading === true && dataLoading === false) {
      setTimeout(() => {
        const { data: { nodes = [], edges = [], groups=[] }, fitView = 'tc' } = this.props;
        if (this.flowEditRef) {
          this.flowEditRef.drawModel({ nodes, edges, groups });
          this.flowEditRef.editorForceFit(fitView || 'tc');
        }
      }, 500);
    }
  }

  getEditThis = (_this) => {
    this.flowEditRef = _this;
  }

  render() {
    const { height = 340, flowRecords } = this.props;

    return (
      <ChartEdit
        height={height}
        className={styles.box}
        getEditThis={this.getEditThis}
        flowRecords={flowRecords}
      />
    );
  }
}

export default FlowChartDetail;
